WIP: Redesign backoffice component system based on Figma UI kit#95
Draft
gazdagergo wants to merge 5 commits intomainfrom
Draft
WIP: Redesign backoffice component system based on Figma UI kit#95gazdagergo wants to merge 5 commits intomainfrom
gazdagergo wants to merge 5 commits intomainfrom
Conversation
Implement atomic design changes from OpenDLP UI kit: - Add new variants: primary, secondary, tertiary (ghost), icon-only - Add icon support with leading_icon, trailing_icon, and icon props - Update typography: Lato 700, 14px, 16px line-height, 0.4px spacing - Update styling: 4px border radius, 12px/16px padding - Add button-specific semantic tokens for theming - Add hover/focus CSS classes with proper state transitions - Maintain backwards compatibility: "outline" maps to "secondary" Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement custom checkbox styling from OpenDLP UI kit: - Custom 16x16 checkbox box with brand-400 border - SVG checkmark (12x12) shown when checked - Checked state fills box with brand-400 - Hover state darkens to brand-600 - Focus ring with 2px outline, 2px offset - Disabled state at 50% opacity - Label: Lato 500, 14px, 20px line-height Add checkbox showcase demonstrating all states. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move historical specs to docs/agent/history/ to reduce context noise for AI agents. Keep permanent guidelines at top level. Structure: - Top level: permanent guidelines + active development folders - history/: completed feature specs, research docs, implementation plans Add ABOUT.md explaining the folder structure and update CLAUDE.md to reference it. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove @fontsource/oswald that was in lockfile but not in package.json. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. ℹ️ You can also turn on project coverage checks and project coverage reporting on Pull Request comment Thanks for integrating Codecov - We've got you covered ☂️ |
Implement custom radio button styling from OpenDLP UI kit: - 16x16 circle with brand-400 border (border-radius: 9999px) - 10x10 inner dot shown when selected with scale animation - White background stays white when selected (dot shows selection) - Hover state darkens border to brand-600 - Focus ring with 2px outline, 2px offset - Disabled state at 50% opacity - Label: Lato 500, 14px, 20px line-height Add radio showcase demonstrating all states and configurations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements atomic design changes from the OpenDLP Figma UI kit to modernize the backoffice component system.
Button Component Redesign
primary,secondary,tertiary(ghost),icon(icon-only)leading_icon,trailing_icon, andiconpropsvariant="outline"maps tosecondaryDesign Tokens
--color-button-*)Related
Test Plan
variant="outline"usage🤖 Generated with Claude Code